<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
    <title>订单审核 - 审核管理</title>
    <script src="https://res.gemcoder.com/js/reload.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <link
            href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css"
            rel="stylesheet"
    />
</head>
<script>
    tailwind.config = {
                theme: {
                    extend: {
                        colors: {
                            primary: '#165DFF',
                            secondary: '#6B7280',
                            success: '#36D399',
                            warning: '#FBBD23',
                            danger: '#F87272',
                            info: '#3ABFF8',
                            light: '#F3F4F6',
                            dark: '#1F2937',
                            'gray-100': '#F9FAFB',
                            'gray-200': '#E5E7EB',
                            'gray-300': '#D1D5DB',
                            'gray-400': '#9CA3AF',
                            'gray-500': '#6B7280',
                            'gray-600': '#4B5563',
                            'gray-700': '#374151',
                            'gray-800': '#1F2937',
                            'gray-900': '#111827',
                        },
                        fontFamily: {
                            inter: ['Inter', 'sans-serif'],
                        },
                    }
                }
            }
</script>
<style type="text/tailwindcss">
    @layer utilities {
        .content-auto {
            content-visibility: auto;
        }
        .form-input-focus {
            @apply focus:ring-2 focus:ring-primary/50 focus:border-primary;
        }
        .form-label {
            @apply block text-sm font-medium text-gray-700 mb-1;
        }
        .form-required {
            @apply text-danger;
        }
        .form-group {
            @apply mb-6;
        }
        .form-section {
            @apply mb-8 pb-6 border-b border-gray-200 last:border-0 last:mb-0 last:pb-0;
        }
        .btn {
            @apply px-4 py-2 rounded-md font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2;
        }
        .btn-primary {
            @apply bg-primary text-white hover:bg-primary/90 focus:ring-primary/50;
        }
        .btn-secondary {
            @apply bg-gray-200 text-gray-800 hover:bg-gray-300 focus:ring-gray-400/50;
        }
        .btn-danger {
            @apply bg-white text-danger border border-danger hover:bg-danger/5 focus:ring-danger/50;
        }
        .card {
            @apply bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden;
        }
        .card-header {
            @apply px-4 py-3 border-b border-gray-200 bg-gray-50;
        }
        .card-body {
            @apply p-4;
        }
        .section-title {
            @apply text-lg font-semibold text-gray-800 mb-4 flex items-center;
        }
        .section-icon {
            @apply mr-2 text-primary;
        }
        .error-message {
            @apply text-danger text-xs mt-1 hidden;
        }
        .error-message.show {
            @apply block;
        }
    }
</style>
</head>
<body class="bg-gray-50 font-inter text-gray-800 min-h-screen flex flex-col">

<!-- 主要内容区 -->
<main class="flex-grow container mx-auto px-4 py-6">
    <div class="flex flex-col lg:flex-row gap-6">
        <!-- 左侧表单区域 -->
        <div class="w-full lg:w-2/3">
            <div class="card">
                <div class="card-body">
                    <!-- 订单基本信息 -->
                    <div class="form-section">
                        <h2 class="section-title">
                            <i class="fas fa-file-alt section-icon"> </i>
                            订单基本信息
                        </h2>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <!-- 系统自动生成字段 -->
                            <div class="form-group">
                                <label for="orderInternalId" class="form-label">采购订单号内码(主键)</label>
                                <input
                                        type="text"
                                        id="orderInternalId"
                                        name="orderInternalId"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus bg-gray-50 cursor-not-allowed"
                                        value="PO-INT-20231115-0001"
                                        readonly
                                />
                            </div>
                            <div class="form-group">
                                <label for="orderNo" class="form-label"> 订单编号 </label>
                                <input
                                        type="text"
                                        id="orderNo"
                                        name="orderNo"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus bg-gray-50 cursor-not-allowed"
                                        value="PO-20231115-0001"
                                        readonly
                                />
                                <div class="error-message" data-for="orderNo">
                                    订单编号格式不正确
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="orderVerificationId" class="form-label">采购订单号核销内码</label>
                                <input
                                        type="text"
                                        id="orderVerificationId"
                                        name="orderVerificationId"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus bg-gray-50 cursor-not-allowed"
                                        value="PO-VER-20231115-0001"
                                        readonly
                                />
                            </div>
                            <div class="form-group">
                                <label for="orderVerificationNo" class="form-label">采购订单核销号</label>
                                <input
                                        type="text"
                                        id="orderVerificationNo"
                                        name="orderVerificationNo"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus bg-gray-50 cursor-not-allowed"
                                        value="PO-VNO-20231115-0001"
                                        readonly
                                />
                            </div>
                            <div class="form-group">
                                <label for="finalBusinessNo" class="form-label">末级业务单据号</label>
                                <input
                                        type="text"
                                        id="finalBusinessNo"
                                        name="finalBusinessNo"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus bg-gray-50 cursor-not-allowed"
                                        value="PO-FBN-20231115-0001"
                                        readonly
                                />
                            </div>
                            <!-- 需要手动填写的字段 -->
                            <div class="form-group">
                                <label for="signingDate" class="form-label">
                                    签约日期
                                    <span class="form-required"> * </span>
                                </label>
                                <input
                                        type="date"
                                        id="signingDate"
                                        name="signingDate"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus bg-gray-50 cursor-not-allowed"
                                        required
                                        value="2023-11-15"
                                        readonly
                                />
                            </div>
                            <div class="form-group">
                                <label for="orderValidDate" class="form-label">
                                    订单有效日期
                                    <span class="form-required"> * </span>
                                </label>
                                <input
                                        type="date"
                                        id="orderValidDate"
                                        name="orderValidDate"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus bg-gray-50 cursor-not-allowed"
                                        required
                                        value="2023-12-15"
                                        readonly
                                />
                            </div>
                            <div class="form-group">
                                <label for="signingLocation" class="form-label">
                                    签约地点
                                </label>
                                <input
                                        type="text"
                                        id="signingLocation"
                                        name="signingLocation"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus bg-gray-50 cursor-not-allowed"
                                        placeholder="请输入签约地点"
                                        value="深圳市南山区科技园"
                                        readonly
                                />
                            </div>
                            <div class="form-group">
                                <label for="deliveryPlanMethod" class="form-label">
                                    交期计划方式
                                </label>
                                <select
                                        id="deliveryPlanMethod"
                                        name="deliveryPlanMethod"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus bg-gray-50 cursor-not-allowed"
                                        readonly
                                >
                                    <option value="">请选择交期计划方式</option>
                                    <option value="standard" selected>标准交期</option>
                                    <option value="urgent">紧急交期</option>
                                    <option value="custom">自定义交期</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="deliveryTerms" class="form-label">
                                    交期条款
                                </label>
                                <input
                                        type="text"
                                        id="deliveryTerms"
                                        name="deliveryTerms"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus bg-gray-50 cursor-not-allowed"
                                        placeholder="请输入交期条款"
                                        value="收到预付款后30天内交货"
                                        readonly
                                />
                            </div>
                            <div class="form-group">
                                <label for="expectedDeliveryDate" class="form-label">
                                    预计交货日期
                                    <span class="form-required"> * </span>
                                </label>
                                <input
                                        type="date"
                                        id="expectedDeliveryDate"
                                        name="expectedDeliveryDate"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus bg-gray-50 cursor-not-allowed"
                                        required
                                        value="2023-12-15"
                                        readonly
                                />
                            </div>
                            <div class="form-group">
                                <label for="pickupDeadline" class="form-label">
                                    提货期限
                                </label>
                                <input
                                        type="text"
                                        id="pickupDeadline"
                                        name="pickupDeadline"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus bg-gray-50 cursor-not-allowed"
                                        placeholder="请输入提货期限"
                                        value="收到通知后7天内提货"
                                        readonly
                                />
                            </div>
                            <div class="form-group">
                                <label for="paymentDeadline" class="form-label">
                                    付款期限
                                    <span class="form-required"> * </span>
                                </label>
                                <select
                                        id="paymentDeadline"
                                        name="paymentDeadline"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus bg-gray-50 cursor-not-allowed"
                                        required
                                        readonly
                                >
                                    <option value="">请选择付款期限</option>
                                    <option value="cash">现金</option>
                                    <option value="credit30" selected>30天信用期</option>
                                    <option value="credit60">60天信用期</option>
                                    <option value="credit90">90天信用期</option>
                                    <option value="l/c">信用证</option>
                                </select>
                            </div>
                            <!-- 系统自动生成字段 -->
                            <div class="form-group">
                                <label for="creator" class="form-label">创建人</label>
                                <input
                                        type="text"
                                        id="creator"
                                        name="creator"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus bg-gray-50 cursor-not-allowed"
                                        value="采购管理员"
                                        readonly
                                />
                            </div>
                            <div class="form-group">
                                <label for="createTime" class="form-label">创建时间</label>
                                <input
                                        type="text"
                                        id="createTime"
                                        name="createTime"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus bg-gray-50 cursor-not-allowed"
                                        value="2023-11-15 09:30:00"
                                        readonly
                                />
                            </div>
                            <div class="form-group">
                                <label for="modifier" class="form-label">修改人</label>
                                <input
                                        type="text"
                                        id="modifier"
                                        name="modifier"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus bg-gray-50 cursor-not-allowed"
                                        value="采购管理员"
                                        readonly
                                />
                            </div>
                            <div class="form-group">
                                <label for="modifyTime" class="form-label">修改时间</label>
                                <input
                                        type="text"
                                        id="modifyTime"
                                        name="modifyTime"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus bg-gray-50 cursor-not-allowed"
                                        value="2023-11-15 09:30:00"
                                        readonly
                                />
                            </div>
                            <div class="form-group">
                                <label for="documentVersion" class="form-label">单据版本号</label>
                                <input
                                        type="text"
                                        id="documentVersion"
                                        name="documentVersion"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus bg-gray-50 cursor-not-allowed"
                                        value="V1.0"
                                        readonly
                                />
                            </div>
                            <div class="form-group">
                                <label for="versionEffectiveTime" class="form-label">本版本生效时间</label>
                                <input
                                        type="text"
                                        id="versionEffectiveTime"
                                        name="versionEffectiveTime"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus bg-gray-50 cursor-not-allowed"
                                        value="2023-11-15 09:30:00"
                                        readonly
                                />
                            </div>
                            <div class="form-group">
                                <label for="originalVersionDate" class="form-label">原始版本生效日期</label>
                                <input
                                        type="text"
                                        id="originalVersionDate"
                                        name="originalVersionDate"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus bg-gray-50 cursor-not-allowed"
                                        value="2023-11-15"
                                        readonly
                                />
                            </div>
                            <div class="form-group">
                                <label for="documentStatus" class="form-label">单据状态</label>
                                <input
                                        type="text"
                                        id="documentStatus"
                                        name="documentStatus"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus bg-gray-50 cursor-not-allowed"
                                        value="草稿"
                                        readonly
                                />
                            </div>
                            <div class="form-group">
                                <label for="redFlushFlag" class="form-label">红冲标记</label>
                                <input
                                        type="text"
                                        id="redFlushFlag"
                                        name="redFlushFlag"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus bg-gray-50 cursor-not-allowed"
                                        value="否"
                                        readonly
                                />
                            </div>
                            <div class="form-group md:col-span-2">
                                <label for="businessSource" class="form-label">
                                    业务来源
                                </label>
                                <select
                                        id="businessSource"
                                        name="businessSource"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus bg-gray-50 cursor-not-allowed"
                                        readonly
                                >
                                    <option value="">请选择业务来源</option>
                                    <option value="internal">内部采购</option>
                                    <option value="external">外部采购</option>
                                    <option value="consignment">寄售采购</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="businessSourceDesc" class="form-label">
                                    业务来源说明
                                </label>
                                <input
                                        type="text"
                                        id="businessSourceDesc"
                                        name="businessSourceDesc"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus bg-gray-50 cursor-not-allowed"
                                        placeholder="请输入业务来源说明"
                                        readonly
                                />
                            </div>
                            <div class="form-group">
                                <label for="sourceDocumentNo" class="form-label">
                                    来源单据号
                                </label>
                                <input
                                        type="text"
                                        id="sourceDocumentNo"
                                        name="sourceDocumentNo"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus bg-gray-50 cursor-not-allowed"
                                        placeholder="请输入来源单据号"
                                        readonly
                                />
                            </div>
                            <div class="form-group">
                                <label for="businessDocumentCode" class="form-label">
                                    业务单据编码
                                </label>
                                <input
                                        type="text"
                                        id="businessDocumentCode"
                                        name="businessDocumentCode"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus bg-gray-50 cursor-not-allowed"
                                        placeholder="请输入业务单据编码"
                                        readonly
                                />
                            </div>
                            <div class="form-group md:col-span-2">
                                <label for="externalOrderVerificationId" class="form-label">外部采购订单核销内码</label>
                                <input
                                        type="text"
                                        id="externalOrderVerificationId"
                                        name="externalOrderVerificationId"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus bg-gray-50 cursor-not-allowed"
                                        value=""
                                        readonly
                                />
                            </div>
                            <div class="form-group">
                                <label for="externalOrderVerificationCode" class="form-label">外部采购订单核销外码</label>
                                <input
                                        type="text"
                                        id="externalOrderVerificationCode"
                                        name="externalOrderVerificationCode"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus bg-gray-50 cursor-not-allowed"
                                        value=""
                                        readonly
                                />
                            </div>
                            <div class="form-group">
                                <label for="externalSystemType" class="form-label">外部系统类型</label>
                                <input
                                        type="text"
                                        id="externalSystemType"
                                        name="externalSystemType"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus bg-gray-50 cursor-not-allowed"
                                        value=""
                                        readonly
                                />
                            </div>
                            <div class="form-group">
                                <label for="externalSystemDocumentId" class="form-label">外部系统单据内码</label>
                                <input
                                        type="text"
                                        id="externalSystemDocumentId"
                                        name="externalSystemDocumentId"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus bg-gray-50 cursor-not-allowed"
                                        value=""
                                        readonly
                                />
                            </div>
                            <div class="form-group">
                                <label for="externalSystemDocumentNo" class="form-label">外部系统单号</label>
                                <input
                                        type="text"
                                        id="externalSystemDocumentNo"
                                        name="externalSystemDocumentNo"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus bg-gray-50 cursor-not-allowed"
                                        value=""
                                        readonly
                                />
                            </div>
                            <div class="form-group md:col-span-2">
                                <label for="externalOrderDetailVerificationId" class="form-label">外部采购订单明细核销内码</label>
                                <input
                                        type="text"
                                        id="externalOrderDetailVerificationId"
                                        name="externalOrderDetailVerificationId"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus bg-gray-50 cursor-not-allowed"
                                        value=""
                                        readonly
                                />
                            </div>
                            <div class="form-group">
                                <label for="externalOrderDetailVerificationCode" class="form-label">外部采购订单明细核销外码</label>
                                <input
                                        type="text"
                                        id="externalOrderDetailVerificationCode"
                                        name="externalOrderDetailVerificationCode"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus bg-gray-50 cursor-not-allowed"
                                        value=""
                                        readonly
                                />
                            </div>
                            <div class="form-group">
                                <label for="externalOrderVerificationId2" class="form-label">外部采购订单核销内码</label>
                                <input
                                        type="text"
                                        id="externalOrderVerificationId2"
                                        name="externalOrderVerificationId2"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus bg-gray-50 cursor-not-allowed"
                                        value=""
                                        readonly
                                />
                            </div>
                            <div class="form-group">
                                <label for="externalOrderVerificationCode2" class="form-label">外部采购订单核销外码</label>
                                <input
                                        type="text"
                                        id="externalOrderVerificationCode2"
                                        name="externalOrderVerificationCode2"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus bg-gray-50 cursor-not-allowed"
                                        value=""
                                        readonly
                                />
                            </div>
                        </div>
                    </div>
                    <!-- 供应商信息 -->
                    <div class="form-section">
                        <h2 class="section-title">
                            <i class="fas fa-building section-icon"> </i>
                            供应商信息
                        </h2>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div class="form-group">
                                <label for="supplier" class="form-label">
                                    供应商
                                    <span class="form-required"> * </span>
                                </label>
                                <select
                                        id="supplier"
                                        name="supplier"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus bg-gray-50 cursor-not-allowed"
                                        required
                                        readonly
                                >
                                    <option value>请选择供应商</option>
                                    <option value="supplier1" selected>深圳市科技发展有限公司</option>
                                    <option value="supplier2">上海电子元件集团</option>
                                    <option value="supplier3">
                                        北京精密仪器股份有限公司
                                    </option>
                                    <option value="supplier4">广州工业材料有限公司</option>
                                </select>
                                <div class="error-message" data-for="supplier">
                                    请选择供应商
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="contactPerson" class="form-label">
                                    联系人
                                    <span class="form-required"> * </span>
                                </label>
                                <input
                                        type="text"
                                        id="contactPerson"
                                        name="contactPerson"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus bg-gray-50 cursor-not-allowed"
                                        placeholder="请输入联系人"
                                        required
                                        value="张伟"
                                        readonly
                                />
                                <div class="error-message" data-for="contactPerson">
                                    请输入联系人
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="contactPhone" class="form-label">
                                    联系电话
                                    <span class="form-required"> * </span>
                                </label>
                                <input
                                        type="tel"
                                        id="contactPhone"
                                        name="contactPhone"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus bg-gray-50 cursor-not-allowed"
                                        placeholder="请输入联系电话"
                                        required
                                        value="13800138000"
                                        readonly
                                />
                                <div class="error-message" data-for="contactPhone">
                                    请输入正确的联系电话
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="email" class="form-label"> 电子邮箱 </label>
                                <input
                                        type="email"
                                        id="email"
                                        name="email"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus bg-gray-50 cursor-not-allowed"
                                        placeholder="请输入电子邮箱"
                                        value="zhangwei@sztech.com"
                                        readonly
                                />
                                <div class="error-message" data-for="email">
                                    请输入正确的电子邮箱
                                </div>
                            </div>
                            <div class="form-group md:col-span-2">
                                <label for="supplierAddress" class="form-label">
                                    联系地址
                                </label>
                                <textarea
                                        id="supplierAddress"
                                        name="supplierAddress"
                                        rows="2"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus resize-none bg-gray-50 cursor-not-allowed"
                                        placeholder="请输入供应商联系地址"
                                        readonly
                                >深圳市南山区科技园南路1001号</textarea>
                                <div class="error-message" data-for="supplierAddress">
                                    地址过长
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 产品明细 -->
                    <div class="form-section">
                        <div class="flex justify-between items-center mb-4">
                            <h2 class="section-title mb-0">
                                <i class="fas fa-boxes section-icon"> </i>
                                产品明细
                            </h2>
                            <button id="addProductBtn" class="btn btn-primary text-sm" style="display: none;">
                                <i class="fas fa-plus mr-1"> </i>
                                添加产品
                            </button>
                        </div>
                        <div class="overflow-x-auto">
                            <table class="min-w-full divide-y divide-gray-200">
                                <thead class="bg-gray-50">
                                <tr>
                                    <th
                                            scope="col"
                                            class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-12"
                                    >
                                        序号
                                    </th>
                                    <th
                                            scope="col"
                                            class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                                    >
                                        产品名称
                                    </th>
                                    <th
                                            scope="col"
                                            class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                                    >
                                        规格型号
                                    </th>
                                    <th
                                            scope="col"
                                            class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                                    >
                                        单位
                                    </th>
                                    <th
                                            scope="col"
                                            class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                                    >
                                        单价(元)
                                    </th>
                                    <th
                                            scope="col"
                                            class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                                    >
                                        数量
                                        <span class="form-required"> * </span>
                                    </th>
                                    <th
                                            scope="col"
                                            class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                                    >
                                        小计(元)
                                    </th>
                                    <th
                                            scope="col"
                                            class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                                    >
                                        是否暂定价
                                    </th>
                                    <th
                                            scope="col"
                                            class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                                    >
                                        不含税单价
                                    </th>
                                    <th
                                            scope="col"
                                            class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                                    >
                                        不含税金额
                                    </th>
                                    <th
                                            scope="col"
                                            class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                                    >
                                        增值税税率
                                    </th>
                                    <th
                                            scope="col"
                                            class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                                    >
                                        增值税金额
                                    </th>
                                    <th
                                            scope="col"
                                            class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-12"
                                    >
                                        操作
                                    </th>
                                </tr>
                                </thead>
                                <tbody
                                        id="productTableBody"
                                        class="bg-white divide-y divide-gray-200"
                                >
                                <tr
                                        class="text-center text-gray-500 py-8"
                                        id="emptyProductRow"
                                >
                                    <td colspan="13" class="px-4 py-8 text-sm">
                                        <div class="flex flex-col items-center">
                                            <i
                                                    class="fas fa-box-open text-2xl mb-2 text-gray-300"
                                            >
                                            </i>
                                            <span> 尚未添加产品，请点击"添加产品"按钮 </span>
                                        </div>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <!-- 交付信息 -->
                    <div class="form-section">
                        <h2 class="section-title">
                            <i class="fas fa-truck section-icon"> </i>
                            交付信息
                        </h2>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div class="form-group">
                                <label for="deliveryDate" class="form-label">
                                    期望交付日期
                                    <span class="form-required"> * </span>
                                </label>
                                <input
                                        type="date"
                                        id="deliveryDate"
                                        name="deliveryDate"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus bg-gray-50 cursor-not-allowed"
                                        required
                                        value="2023-12-10"
                                        readonly
                                />
                                <div class="error-message" data-for="deliveryDate">
                                    请选择期望交付日期
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="deliveryType" class="form-label">
                                    交付方式
                                    <span class="form-required"> * </span>
                                </label>
                                <select
                                        id="deliveryType"
                                        name="deliveryType"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus bg-gray-50 cursor-not-allowed"
                                        required
                                        readonly
                                >
                                    <option value>请选择交付方式</option>
                                    <option value="express">快递</option>
                                    <option value="logistics" selected>物流</option>
                                    <option value="self-pickup">自提</option>
                                    <option value="other">其他</option>
                                </select>
                                <div class="error-message" data-for="deliveryType">
                                    请选择交付方式
                                </div>
                            </div>
                            <div class="form-group md:col-span-2">
                                <label for="deliveryAddress" class="form-label">
                                    交付地址
                                    <span class="form-required"> * </span>
                                </label>
                                <textarea
                                        id="deliveryAddress"
                                        name="deliveryAddress"
                                        rows="2"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus resize-none bg-gray-50 cursor-not-allowed"
                                        placeholder="请输入交付地址"
                                        required
                                        readonly
                                >深圳市南山区科技园物流中心</textarea>
                                <div class="error-message" data-for="deliveryAddress">
                                    请输入交付地址
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="receiver" class="form-label">
                                    收货人
                                    <span class="form-required"> * </span>
                                </label>
                                <input
                                        type="text"
                                        id="receiver"
                                        name="receiver"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus bg-gray-50 cursor-not-allowed"
                                        placeholder="请输入收货人"
                                        required
                                        value="李明"
                                        readonly
                                />
                                <div class="error-message" data-for="receiver">
                                    请输入收货人
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="receiverPhone" class="form-label">
                                    收货人电话
                                    <span class="form-required"> * </span>
                                </label>
                                <input
                                        type="tel"
                                        id="receiverPhone"
                                        name="receiverPhone"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus bg-gray-50 cursor-not-allowed"
                                        placeholder="请输入收货人电话"
                                        required
                                        value="13900139000"
                                        readonly
                                />
                                <div class="error-message" data-for="receiverPhone">
                                    请输入正确的收货人电话
                                </div>
                            </div>
                            <div class="form-group md:col-span-2">
                                <label for="deliveryRemark" class="form-label">
                                    交付备注
                                </label>
                                <textarea
                                        id="deliveryRemark"
                                        name="deliveryRemark"
                                        rows="2"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus resize-none bg-gray-50 cursor-not-allowed"
                                        placeholder="请输入交付备注信息"
                                        readonly
                                >请轻拿轻放，避免剧烈震动</textarea>
                                <div class="error-message" data-for="deliveryRemark">
                                    备注信息过长
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 右侧实时计算面板 -->
        <div class="w-full lg:w-1/3">
            <div class="card sticky top-24">
                <div class="card-header">
                    <h2 class="font-medium text-gray-800 flex items-center">
                        <i class="fas fa-calculator mr-2 text-primary"> </i>
                        订单汇总
                    </h2>
                </div>
                <div class="card-body">
                    <div class="space-y-4">
                        <div class="text-sm text-gray-500 mb-3">
                            已选产品 (
                            <span id="productCount"> 0 </span>
                            )
                        </div>
                        <div
                                id="summaryProductList"
                                class="max-h-64 overflow-y-auto mb-4"
                        >
                            <div
                                    class="text-center text-gray-500 py-8 text-sm"
                                    id="emptySummaryList"
                            >
                                <div class="flex flex-col items-center">
                                    <i
                                            class="fas fa-shopping-cart text-2xl mb-2 text-gray-300"
                                    >
                                    </i>
                                    <span> 暂无产品，请添加产品 </span>
                                </div>
                            </div>
                        </div>
                        <div class="border-t border-gray-200 pt-4 mt-4">
                            <div class="flex justify-between text-base font-medium mb-2">
                                <span> 订单总金额： </span>
                                <span id="totalAmount" class="text-lg text-primary">
                      ¥0.00
                    </span>
                            </div>
                            <div class="text-xs text-gray-500">
                                <p>根据所选择的产品自动计算，包含所有产品小计金额</p>
                            </div>
                        </div>
                        <div
                                class="bg-blue-50 border border-blue-100 rounded-md p-3 text-sm text-blue-700 mt-4"
                        >
                            <i class="fas fa-info-circle mr-1"> </i>
                            <span> 提交订单后将自动生成采购合同，进入审批流程 </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

        <!-- 审核操作区 -->
        <div
                class="bg-white rounded-xl shadow-md p-6 transition-all duration-300 hover:shadow-lg"
        >
            <h2 class="text-lg font-semibold text-gray-800 mb-6">审核操作</h2>
            <div class="mb-6">
                <label class="block text-sm font-medium text-gray-700 mb-2">
                    审核意见
                </label>
                <textarea
                        class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none transition-all"
                        placeholder="请输入审核意见（选填）"
                        rows="4"
                >
            </textarea>
            </div>
            <div
                    class="flex flex-col sm:flex-row justify-between items-start sm:items-center space-y-4 sm:space-y-0 mb-6"
            >
                <div class="flex space-x-4">
                    <button
                            class="px-6 py-3 bg-green-600 hover:bg-green-700 text-white font-medium rounded-lg transition-colors duration-300 flex items-center shadow-md hover:shadow-lg transform hover:-translate-y-0.5 transition-all"
                            id="approve-btn"
                    >
                        <i class="fas fa-check-circle mr-2"> </i>
                        通过
                    </button>
                    <button
                            class="px-6 py-3 bg-red-600 hover:bg-red-700 text-white font-medium rounded-lg transition-colors duration-300 flex items-center shadow-md hover:shadow-lg transform hover:-translate-y-0.5 transition-all"
                            id="reject-btn"
                    >
                        <i class="fas fa-times-circle mr-2"> </i>
                        驳回
                    </button>
                </div>
                <button
                        class="px-6 py-3 bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium rounded-lg transition-colors duration-300 flex items-center shadow-sm hover:shadow transition-all"
                        id="back-btn"
                >
                    <i class="fas fa-arrow-left mr-2"> </i>
                    返回
                </button>
            </div>
        </div>
    </main>
</div>
<!-- 驳回原因弹窗 -->
<div
        class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"
        id="reject-modal"
>
    <div
            class="bg-white rounded-xl shadow-xl w-full max-w-md mx-4 transform transition-all duration-300 scale-95 opacity-0"
            id="modal-content"
    >
        <div class="p-6 border-b border-gray-200">
            <h3 class="text-lg font-semibold text-gray-800">驳回原因</h3>
        </div>
        <div class="p-6">
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-2">
                    请输入驳回原因（必填）
                </label>
                <textarea
                        class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent resize-none transition-all"
                        id="reject-reason"
                        placeholder="请详细说明驳回原因..."
                        rows="4"
                >
            </textarea>
                <p class="text-red-500 text-xs mt-1 hidden" id="reason-error">
                    请输入驳回原因
                </p>
            </div>
        </div>
        <div class="p-4 bg-gray-50 rounded-b-xl flex justify-end space-x-3">
            <button
                    class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100 transition-colors"
                    id="cancel-reject"
            >
                取消
            </button>
            <button
                    class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg transition-colors"
                    id="confirm-reject"
            >
                提交驳回
            </button>
        </div>
    </div>
</div>
<!-- 操作成功弹窗 -->
<div
        class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"
        id="success-modal"
>
    <div
            class="bg-white rounded-xl shadow-xl w-full max-w-md mx-4 transform transition-all duration-300 scale-95 opacity-0"
            id="success-content"
    >
        <div class="p-6 text-center">
            <div
                    class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4"
            >
                <i class="fas fa-check text-2xl text-green-600"> </i>
            </div>
            <h3
                    class="text-lg font-semibold text-gray-800 mb-2"
                    id="success-title"
            >
                操作成功
            </h3>
            <p class="text-gray-600 mb-6" id="success-message">
                订单已成功通过审核
            </p>
            <button
                    class="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors"
                    id="success-confirm"
            >
                确定
            </button>
        </div>
    </div>
</div>
<script>
    // 页面加载时初始化
            document.addEventListener('DOMContentLoaded', () => {


                // 驳回弹窗控制
                const rejectBtn = document.getElementById('reject-btn');
                const rejectModal = document.getElementById('reject-modal');
                const modalContent = document.getElementById('modal-content');
                const cancelReject = document.getElementById('cancel-reject');
                const confirmReject = document.getElementById('confirm-reject');
                const rejectReason = document.getElementById('reject-reason');
                const reasonError = document.getElementById('reason-error');

                // 成功弹窗控制
                const successModal = document.getElementById('success-modal');
                const successContent = document.getElementById('success-content');
                const successConfirm = document.getElementById('success-confirm');
                const successTitle = document.getElementById('success-title');
                const successMessage = document.getElementById('success-message');

                // 打开驳回弹窗
                rejectBtn.addEventListener('click', () => {
                    rejectModal.classList.remove('hidden');
                    // 动画效果
                    setTimeout(() => {
                        modalContent.classList.remove('scale-95', 'opacity-0');
                        modalContent.classList.add('scale-100', 'opacity-100');
                    }, 10);
                    rejectReason.value = '';
                    reasonError.classList.add('hidden');
                    rejectReason.focus();
                });

                // 关闭驳回弹窗
                function closeRejectModal() {
                    modalContent.classList.remove('scale-100', 'opacity-100');
                    modalContent.classList.add('scale-95', 'opacity-0');
                    setTimeout(() => {
                        rejectModal.classList.add('hidden');
                    }, 300);
                }

                cancelReject.addEventListener('click', closeRejectModal);

                // 点击弹窗外部关闭
                rejectModal.addEventListener('click', (e) => {
                    if (e.target === rejectModal) {
                        closeRejectModal();
                    }
                });

                // 确认驳回
                confirmReject.addEventListener('click', () => {
                    if (!rejectReason.value.trim()) {
                        reasonError.classList.remove('hidden');
                        rejectReason.classList.add('border-red-500');
                        rejectReason.focus();
                        return;
                    }

                    // 获取订单ID（从URL参数或页面数据中获取）
                    const urlParams = new URLSearchParams(window.location.search);
                    const orderId = urlParams.get('orderId');
                    
                    if (!orderId) {
                        alert('无法获取订单ID');
                        return;
                    }

                    // 调用驳回API
                    fetch(`/purchaseOrder/reject/${orderId}`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify({
                            rejectReason: rejectReason.value.trim()
                        })
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.code === 0) {
                            // 显示成功弹窗
                            closeRejectModal();
                            showSuccessModal('驳回成功', '订单已成功驳回，订单状态已回退为"驳回"');
                        } else {
                            alert('驳回失败: ' + data.message);
                        }
                    })
                    .catch(error => {
                        console.error('驳回请求失败:', error);
                        alert('驳回请求失败，请重试');
                    });
                });

                // 输入驳回原因时隐藏错误提示
                rejectReason.addEventListener('input', () => {
                    if (rejectReason.value.trim()) {
                        reasonError.classList.add('hidden');
                        rejectReason.classList.remove('border-red-500');
                    }
                });

                // 通过按钮
                const approveBtn = document.getElementById('approve-btn');

                approveBtn.addEventListener('click', () => {
                    // 获取订单ID（从URL参数或页面数据中获取）
                    const urlParams = new URLSearchParams(window.location.search);
                    const orderId = urlParams.get('orderId');
                    
                    if (!orderId) {
                        alert('无法获取订单ID');
                        return;
                    }

                    // 调用通过审核API
                    fetch(`/purchaseOrder/approve/${orderId}`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify({})
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.code === 0) {
                            // 显示成功弹窗
                            showSuccessModal('审核通过', '订单已成功通过审核');
                        } else {
                            alert('审核失败: ' + data.message);
                        }
                    })
                    .catch(error => {
                        console.error('审核请求失败:', error);
                        alert('审核请求失败，请重试');
                    });
                });

                // 显示成功弹窗
                function showSuccessModal(title, message) {
                    successTitle.textContent = title;
                    successMessage.textContent = message;
                    successModal.classList.remove('hidden');
                    // 动画效果
                    setTimeout(() => {
                        successContent.classList.remove('scale-95', 'opacity-0');
                        successContent.classList.add('scale-100', 'opacity-100');
                    }, 10);
                }

                // 关闭成功弹窗
                function closeSuccessModal() {
                    successContent.classList.remove('scale-100', 'opacity-100');
                    successContent.classList.add('scale-95', 'opacity-0');
                    setTimeout(() => {
                        successModal.classList.add('hidden');
                        // 跳转到ReviewList页面
                        window.location.href = 'ReviewList.html';
                    }, 300);
                }

                successConfirm.addEventListener('click', closeSuccessModal);

                // 点击成功弹窗外部关闭
                successModal.addEventListener('click', (e) => {
                    if (e.target === successModal) {
                        closeSuccessModal();
                    }
                });

                // 返回按钮
                const backBtn = document.getElementById('back-btn');

                backBtn.addEventListener('click', () => {
                    window.location.href = 'ReviewList.html';
                });

                // 添加键盘事件支持
                document.addEventListener('keydown', (e) => {
                    if (e.key === 'Escape') {
                        if (!rejectModal.classList.contains('hidden')) {
                            closeRejectModal();
                        }
                        if (!successModal.classList.contains('hidden')) {
                            closeSuccessModal();
                        }
                    }
                });
            });
</script>
</body>
</html>
